<template>
	<div class="login" @mousedown="handleMouseDown">
		<!-- 按钮 -->
		<div class="login_config">
			<!-- 暗黑模式 -->
			<el-button @click="configDark" circle>
				<el-icon>
					<Sunny v-if="!isDark" />
					<Moon v-else />
				</el-icon>
			</el-button>

			<!-- 国际化 -->
			<el-dropdown trigger="click" @command="configLang" style="margin: 0 15px;">
				<el-button circle>
					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
						role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512">
						<path
							d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z"
							fill="currentColor"></path>
						<path
							d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
							fill="currentColor"></path>
					</svg>
				</el-button>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item v-for="item in config.LANG" :key="item.value" :command="item">
							{{ item.name }}
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>

			<!-- 退出应用 -->
			<el-button @click="closeWindow" circle icon="Close"></el-button>
		</div>
		<!-- 左侧 -->
		<div class="login_adv">

			<div class="login_adv_title">
				<h2>小鹿线</h2>
				<h4>客户关系管理系统</h4>
				<p>让业务在线更高效，加速企业数字化升级。</p>
			</div>

			<div class="login_adv_mask"></div>

			<div class="login_adv_image">
				<img src="../../assets/images/data.png" width="100%">
			</div>

			<div class="login_adv_bottom">
				© 小鹿线客户管理系统 1.0.11
			</div>

		</div>
		<!-- 右侧 -->
		<div class="login-main">
			<div class="login-form">

				<div class="login-header">
					<div class="login-img">
						<img src="../../assets/images/logo.png" alt="">
						<label>小鹿线客户管理系统</label>
					</div>
				</div>
				<el-tabs style="height: 350px;">
					<el-tab-pane :label="$t('login.accountLogin')" lazy>
						<passwordForm></passwordForm>
					</el-tab-pane>
					<el-tab-pane :label="$t('login.mobileLogin')" lazy>
						<phoneForm></phoneForm>
					</el-tab-pane>
				</el-tabs>
				<template v-if='true'>
					<el-divider>{{ $t('login.signInOther') }}</el-divider>
					<div class="login-oauth">
						<!--微信按钮-->
						<el-button type="success" circle size="large">
							<el-icon size="large">
								<ChatDotRound />
							</el-icon>
						</el-button>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue';
import passwordForm from './components/passwordForm.vue';
import phoneForm from './components/phoneForm.vue';
import useMouseDown from '@renderer/composables/mouseDown'

// 移动窗口相关组合式函数
const { handleMouseDown } = useMouseDown()
// 关闭软件
const closeWindow = () => {
	window.electron.ipcRenderer.invoke('renderer-to-main', { name: 'close-login' })
}

// 暗黑模式
const isDark = ref(JSON.parse(localStorage.getItem('dark') || 'false'))
const configDark = () => {
	isDark.value = !isDark.value
	const html = document.querySelector('html')
	html!.className = isDark.value ? 'dark' : ''
	localStorage.setItem('dark', JSON.stringify(isDark.value))
}

/* 切换语言 */
const config = {
	LANG: [
		{ name: "简体中文", value: 'zh-cn' },
		{ name: "English", value: 'en' },
	]
}
// 从当前的 VUE 实例解析出上下文对象（this）
const { proxy } = getCurrentInstance()!

const configLang = (command: {
	name: string
	value: string
}) => {
	// 给 i8n 设置语言选项
	proxy!.$i18n.locale = command.value
	// 将语言选项存储至本地
	localStorage.setItem('lang', command.value)
}
</script>

<style scoped>
.login {
	height: 100vh;
	background-color: var(--el-bg-color);
	display: flex;
}

.login_adv {
	background: url('../../assets/images/auth_banner.jpg') no-repeat;
	width: 40%;
	position: relative;
}

.login_adv_title {
	position: absolute;
	color: #fff;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 40px;
}

.login_adv_title h2 {
	font-size: 40px;
}

.login_adv_title h4 {
	font-size: 18px;
	margin-top: 10px;
	font-weight: normal;
}

.login_adv_title p {
	font-size: 14px;
	margin-top: 10px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .6);
}

.login_adv_image {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 80px;
	padding: 40px;
	z-index: 3;
}

.login_adv_image img {
	width: 100%;
	height: 100%;
}

.login_adv_bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	color: #fff;
	padding: 0 40px 40px 40px;
}

.login_adv_mask {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, .5);
	z-index: 1;
}

.login-main {
	flex: 1;
	display: flex;
	overflow: auto;
}

.login-form {
	width: 400px;
	margin: auto;
	padding: 80px 0 0 0;
}

.login-header {
	margin-bottom: 40px;
}

.login-header .login-img {
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-header .login-img img {
	width: 40px;
	height: 40px;
	vertical-align: bottom;
	margin-right: 10px;
}

.login-header .login-img label {
	font-size: 26px;
	font-weight: bold;
}

.login-oauth {
	display: flex;
	justify-content: space-around;
}

.login_config {
	position: absolute;
	right: 0;
	top: 0;
	margin: 20px;
}
</style>